<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <#include "../common/header.ftl"/>

</head>
<body>
<!--准备模板-->
<table id="template" style="display: none">
    <tr>
        <td></td>
        <td></td>
        <td>
            <a class="btn btn-info btn-xs inputBtn">
                <span class="glyphicon glyphicon-pencil"></span>编辑
            </a>
            <a class="btn btn-danger btn-xs changeStatusBtn">
                <span class="glyphicon glyphicon-trash"></span>设为推荐
            </a>
        </td>
    </tr>
</table>

<div class="container " style="margin-top: 20px">
    <#include "../common/top.ftl"/>
    <div class="row">
        <div class="col-sm-3">
        <#-- 往数据模型中填充一个属性 -->
            <#assign menu="region"/>
            <#include "../common/menu.ftl"/>
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">地区管理</h1>
                </div>
            </div>
            <!--高级查询--->
            <form class="form-inline" id="searchForm" action="/regions/list.do" method="post">
                <input type="hidden" name="currentPage" id="currentPage" value="1">
                <a role="button" class="btn btn-success inputBtn">
                    <span class="glyphicon glyphicon-plus"></span> 添加
                </a>
            </form>
            <div class="row">
                <div class="col-sm-4">
                    <div id="treeview"></div>
                </div>
                <div class="col-sm-8">
                    <table class="table table-striped table-hover regionTable">
                        <thead>
                            <tr>
                                <th>编号</th>
                                <th>名称</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>


        </div>
    </div>
</div>
<#--模态框-->
<div class="modal fade" id="regionModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">编辑</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/regions/saveOrUpdate.do" method="post" id="regionForm">
                    <input type="hidden" name="id" />
                    <input type="hidden" class="form-control" name="parent.id"/>
                    <div class="form-group" >
                        <label class="col-sm-4 control-label">名称：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="name"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">上级地区：</label>
                        <div class="col-sm-6">
                             <input type="text" class="form-control" name="parent.name" readonly/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary regionSubmitBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $.get("/regions/selectByParentId.do",{type:'tree'}, function (data) {
            var defaultData = [
                {
                    text: '全部地区',
                    nodes: data
                }
             ];
            $('#treeview').treeview({
                data: defaultData,
                showTags: true,
                //lazyLoad的函数的第一个参数,就是当前被点击的节点
                lazyLoad:function (node) {
                    $.get("/regions/selectByParentId.do",{parentId:node.id,type:'tree'},function (data) {
                        //把子地区放到node下
                        //第一个参数表示要添加的(子节点)数据,第二个参数表示被添加到哪里(父节点)
                        $('#treeview').treeview("addNode",[data,node]);
                    });
                },
                //选择节点事件,node就是我们所选择的节点
                onNodeSelected:function (event,node) {
                    //方法一,将表格数据拼接好,在放入tbody中
                    /*var temp = "";
                    $.get("/region/selectByParentId.do",{parentId:node.id},function (data) {
                        $.each(data,function (index,ele) {
                            temp += "<tr><td>"+(index+1)+"</td><td>"+ele.name+"</td></tr>";
                        });
                        //将拼接的行和表格信息放入表格体中
                        $(".regionTable tbody").html(temp);
                    });*/
                    //方法二
                    $.get('/regions/selectByParentId.do',{parentId:node.id},function (data){
                        //使tbody数据为空
                        $(".regionTable tbody").empty();
                        $.each(data,function (index,ele) {
                           //克隆模板,包括事件
                            var tr = $("#template tr").clone(true);
                            //往克隆的tr中填充数据
                            $(tr).find("td:nth-child(1)").html(index+1);
                            $(tr).find("td:nth-child(2)").html(ele.name);
                            $(tr).find("a").attr("data-json",ele.json);
                            if(ele.state == 1){
                               $(tr).find("a.changeStatusBtn").html("<span class=\"glyphicon glyphicon-trash\"></span>取消推荐");
                            }
                            //将填充后的tr添加到tbody中
                            $(".regionTable tbody").append(tr);
                        });
                    });
                }
            });
        });

        $(".inputBtn").click(function () {
            //清空模态框
            $("#regionModal input").val("");
            var json =$(this).data("json");
            if (json) {
                $("#regionForm input[name='id']").val(json.id);
                $("#regionForm input[name='name']").val(json.name);
                $("#regionForm input[name='parent.id']").val(json.parentId);
                $("#regionForm input[name='parent.name']").val(json.parentName);
            }else{
                //获取选中的节点数据数组
                var selected = $("#treeview").treeview("getSelected");
                if(selected.length>0){
                    //回显到模态框
                    $("#regionForm input[name='parent.id']").val(selected[0].id);
                    $("#regionForm input[name='parent.name']").val(selected[0].text);
                }
            }
            $("#regionModal").modal("show");
        });

        //提交模态框的表单
        $(".regionSubmitBtn").click(function () {
            //将表单的提交凡是修改为ajax异步提交
            $("#regionForm").ajaxSubmit(function (data) {
                if (data.success) {
                    $.messager.alert("温馨提示","操作完成,2秒后关闭");
                    setTimeout(function () {
                        window.location.reload();
                    },2000);
                }
            });
        });
        $(".changeStatusBtn").click(function () {
            var json = $(this).data("json");
            var status = 1;
            console.log(json.state);
            if (json.state==1) {
                status = 0;
            }
            $.post("/regions/updateStatus.do",{state:status,id:json.id},
                function (data) {
                    if (data.success) {
                        $.messager.alert("温馨提示", "操作成功,2s后关闭");
                        setTimeout(function () {
                            window.location.reload();
                        }, 2000);
                    }
                }
                );
        });
    });
</script>
</body>
</html>